<div class="vitrage-alarms">
    <accordion close-others="false">
        <accordion-group is-open="true" class="accordion-group-text">
            <accordion-heading>{$ 'Alarms' | translate $}</accordion-heading>
            <accordion-body ui-blocker ui-blocker-delay="0">
                <label ng-show="alarmsCtrl.computeAlarms.length == 0">{$ 'No alarms for ' + selected.name | translate $}</label>

                <table ng-show="alarmsCtrl.computeAlarms.length > 0"
                       st-table='alarmsCtrl.computeAlarms'
                       class="table-striped table-rsp table-detail modern"
                       hz-table>
                    <thead>
                    <tr>
                        <th class="state-col" st-sort="vitrage_aggregated_state"></th>
                        <th class="timestamp-col" st-sort="update_timestamp">{$ 'Time' | translate $}</th>
                        <th class="name-col" st-sort="name">{$ 'Name' | translate $}</th>
                        <th class="rca-col">{$ 'RCA' | translate $}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="alarm in alarmsCtrl.computeAlarms track by $index">
                        <td title="{$ alarm.vitrage_aggregated_state $}"><i class="fa" ng-class="{'orange fa-exclamation-triangle': alarm.vitrage_operational_severity == 'SEVERE', 'yellow fa-exclamation-triangle': alarm.vitrage_operational_severity == 'WARNING', 'red fa-exclamation-circle': alarm.vitrage_operational_severity == 'CRITICAL', 'green fa-check': alarm.vitrage_operational_severity == 'OK', 'gray fa-circle-o-notch': alarm.vitrage_operational_severity == 'N/A'}"></i></td>
                        <td title="{$alarm.update_timestamp | vitrageDate:alarmsCtrl.dateFormat:alarmsCtrl.timezone$}"><i class="fa fa-clock-o"></i> {$alarm.update_timestamp | vitrageDate:alarmsCtrl.dateFormat:alarmsCtrl.timezone$} </td>
                        <td class="ellipsis" title="{$alarm.name$}">{$alarm.name$}</td>
                        <td title="{$ 'Root Cause Analysis' | translate $}" ng-click="alarmsCtrl.onAlarmClick(alarm)"><i class="fa fa-sitemap"></i></td>
                    </tr>
                    </tbody>
                </table>

           </accordion-body>
        </accordion-group>
    </accordion>
</div>